import axios from 'axios'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import router from '@/router'
// create an axios instance
const service = axios.create({
  // baseURL: 'http://localhost:8080/api', // url = base url + request url
  // baseURL: '/api', // 如果配置基地址的时候没有指定协议和域名, 浏览器在请求的时候会自动拼接当前项目运行的协议和域名
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})
let loading
// 添加请求拦截器
service.interceptors.request.use(function(config) {
  console.log(config) // config是请求的配置对象,这个对象中有headers,就是请求头
  // 在请求拦截器中统一挂载token
  if (store.getters.token) {
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  // 请求拦截器中开启全屏loading
  loading = Loading.service({
    lock: true, // 锁定禁止页面滚动
    text: '正在玩命加载中....', // 加载的提示文本
    spinner: 'el-icon-loading', // 加载的提示图标
    background: 'rgba(0, 0, 0, 0.7)' // 加载的背景色
  })
  // 在发送请求之前做些什么
  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 添加响应拦截器,
service.interceptors.response.use(function(response) {
  // 数据响应回来后关闭loading
  loading.close()
  console.log('响应回来了', response)// 响应的数据
  // 在响应拦截器中统一处理消息提示, 以后的请求的消息提示不需要再写了
  if (response.data.success) {
    Message.success(response.data.message)
  } else {
    Message.error(response.data.message)
    // return // 1. 阻止后续代码的执行
    // 2. 手动抛出错误的promise fullfiled rejected
    /* return new Promise((resolve, reject) => {
      reject()
    }) */
    return Promise.reject('错误了')
  }
  // 2xx 范围内的状态码都会触发该函数。
  // 将服务器返回的数据交给浏览器
  return response.data // 直接将真正服务器返回的数据交给浏览器, 相当于将响应的数据扒皮了
}, function(error) { // 响应失败会经过响应拦截器的第二个处理函数
  loading.close()
  // console.dir(error) // 是响应的错误对象, 里面包含了响应的信息
  if (error.response.status === 401 && error.response.data.code === 10002) {
    // token过期失效了
    // 1. 清除失效的token
    store.commit('user/clearToken')
    // 2. 重新登录
    router.push('/login')
  }
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})
// 后续需要用到拦截器 自己添加
export default service
